<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pp</title>
    <style>
        *{
            box-sizing: border-box;
        }
        table{
            width:50%;
            border-collapse: collapse;
            margin:0 auto;
            background-image: linear-gradient(-80deg,rgb(39 153 176 / 66%),rgb(195 37 37 / 66%));
        }
        td{
            text-align: center;
            color:rgb(248, 247, 244);
            border-bottom: 2px solid black;
        }
        td:nth-child(1){
            width:3em;
           
        }
        td:not(#btn):hover{
            background-color: rgba(7, 7, 7, 0.644);
        }
        #app tr:nth-child(2n):hover{
            background-color: rgb(153, 75, 75);
        }
        #app tr:nth-child(2n+1):hover{
            background-color: #135e70e7;
        }
        table button:hover{
            cursor:pointer;
            background-color: rgb(233, 189, 189);
            border: 1px solid rgb(245, 245, 245);
            color:tomato;
        }
        th{
            background:none;
        }
    </style>
</head>

<body>
    <div id="app">
      
        <!-- <my-component message="父级"></my-component> -->
        <table>
            <thead>
                <tr><th>序号</th><th>类别</th><th>名称</th><th>价格</th><th>数量</th><th>入仓时间</th><th></th></tr>
                <tr v-for="(item,index) in list">
                    <td>{{item.id}}</td>
                    <td>{{item.type}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.num}}</td>
                    <td>{{item.add_time}}</td>
                     <td id="btn">
                        <div>
                            <button @click="romove(item.id)">删除</button>
                        </div>
                    </td> 
                </tr>
            </thead>
        </table>
    </div>
    <template id="temp">
       
    </template> 
    <script type="text/javaScript" charset="UTF-8" src="/JS文件/vue.js"></script>
    <script type="text/javaScript">

            // Vue.component('my-romoveBtn',{
            //     props:['romove'],
            //     template:'#temp'

            // })        

            
           const app=new Vue({ 
                el:'#app',
                data:{
                     // message:'外部数据' ,
                     list:[
                         {name:123,age}
                     ], 
                     },
                     methods:{
                        romove(value){
                            console.log(value)
                            p(deleteRer(value)).then(romve=>{
                                console.log(romve);
                            })
                        }
                     }
                    });
                   

                const p = function(text){ 
                    return new Promise((resolve,reject) => { 
                        // 1.创建对象 
                        // var XMLHttpRequest = requrire('xmlhttprequest').XMLHttpRequest;

                        var  xhr = new XMLHttpRequest();
                      // 4.绑定事件,处理 
                        xhr.onreadystatechange = function(){ 
                            // 判断 
                            console.log(xhr.status);
                            if(xhr.readyState === 4){ 
                                // 判断响应状态码 200-299 
                                if(xhr.status>=200 && xhr.status<300){ 

                                    let data=JSON.parse(xhr.response) 
                                        console.log(data) 
                                        resolve(data) 
                                    }else{ 
                                        reject(xhr.status)
                                        } 
                                    } 
                            } 
                          // 2.初始化
                          xhr.open("GET",text,true);

                         // 3.发送 
                         xhr.send(null); 
                  
                          }); 
              } 
        function http(){ 
                    let http ;
                    return http=`http://127.0.0.1:3000/are`;
        } 
        function deleteRer(dele){
    
                return  `http://127.0.0.1:3000/dele?id=${dele}`
        }


       
        // function romove(){ 
        //          let http 
        //          return http=`http://127.0.0.1:3000/deleName?id=${'delete'}`
        //     } 
                  // 指定回调

             p(http()).then(value=>{ 
                 app.list=value ;
                },(error)=>{
                    console.log(error);
                })
           
    </script>
</body>

</html>